<template>
  <div id="check-layout">
    <div itemid="check-layout-title">
      <a-input
        style="margin-top: 8px"
        :style="{ width: mobile ? '50%' : '70%' }"
        placeholder="请输入数据验证码"
        v-model="key"
      />
      <a-button-group style="margin-left: 1%">
        <a-button style="width: 50%" type="primary" @click="search">
          查询
        </a-button>
        <a-button style="width: 50%" @click="clear"> 清空 </a-button>
      </a-button-group>
    </div>
    <div v-if="checkInfo.basic == null" id="check-empty">
      <a-skeleton />
      <a-skeleton />
      <a-skeleton />
    </div>
    <div id="check-layout" v-else>
      <a-collapse :ghost="true">
        <!-- 基本信息 -->
        <a-collapse-panel key="basic-title" header="基本信息">
          <a-descriptions
            bordered
            :column="{ xxl: 4, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
          >
            <a-descriptions-item label="身份证">
              {{ checkInfo.basic.personId }}
            </a-descriptions-item>
            <a-descriptions-item label="姓名">
              {{ checkInfo.basic.name }}
            </a-descriptions-item>
            <a-descriptions-item label="性别">
              {{ checkInfo.basic.gender }}
            </a-descriptions-item>
            <a-descriptions-item label="民族">
              {{ checkInfo.basic.nation }}
            </a-descriptions-item>
            <a-descriptions-item label="出生日期">
              {{ checkInfo.basic.birthday }}
            </a-descriptions-item>
            <a-descriptions-item label="上链时间" :span="3">
              {{ checkInfo.basic.createTime }}
            </a-descriptions-item>
            <a-descriptions-item label="交易哈希" :span="2">
              {{ checkInfo.basic.transactionHash }}
            </a-descriptions-item>
            <a-descriptions-item label="交易序号" :span="2">
              {{ checkInfo.basic.transactionIndex }}
            </a-descriptions-item>
            <a-descriptions-item label="区块哈希" :span="2">
              {{ checkInfo.basic.blockHash }}
            </a-descriptions-item>
            <a-descriptions-item label="区块号" :span="2">
              {{ checkInfo.basic.blockNumber }}
            </a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
        <a-collapse-panel
          v-for="education in checkInfo.education"
          :key="education.eduId"
          :header="'学历信息 - ' + education.eduType"
        >
          <a-descriptions bordered>
            <a-descriptions-item label="机构名称">
              {{ education.nodeName }}
            </a-descriptions-item>
            <a-descriptions-item label="机构类型">
              <template v-if="education.allianceType == 0"> 高校 </template>
              <template v-else> 社会教培 </template>
            </a-descriptions-item>
            <a-descriptions-item label="所属专业">
              {{ education.majorName }}
            </a-descriptions-item>
            <a-descriptions-item label="入学时间">
              {{ education.beginTime }}
            </a-descriptions-item>
            <a-descriptions-item label="毕业时间">
              {{ education.endTime }}
            </a-descriptions-item>
            <a-descriptions-item label="获得学分">
              {{ education.acquireCredit }}
            </a-descriptions-item>
            <a-descriptions-item label="毕业学分">
              {{ education.graduateCredit }}
            </a-descriptions-item>
            <a-descriptions-item label="学历证书" :span="2">
              {{ education.certifyUri }}
            </a-descriptions-item>
            <a-descriptions-item label="上链时间" :span="3">
              {{ education.createTime }}
            </a-descriptions-item>
            <a-descriptions-item label="交易哈希" :span="2">
              {{ education.transactionHash }}
            </a-descriptions-item>
            <a-descriptions-item label="交易序号" :span="2">
              {{ education.transactionIndex }}
            </a-descriptions-item>
            <a-descriptions-item label="区块哈希" :span="2">
              {{ education.blockHash }}
            </a-descriptions-item>
            <a-descriptions-item label="区块号" :span="2">
              {{ education.blockNumber }}
            </a-descriptions-item>
            <a-descriptions-item label="" :span="3">
              <a-badge status="processing" text="课程信息" />
            </a-descriptions-item>
            <a-descriptions-item
              v-for="(course, index) in education.course"
              :key="course.key"
              :label="index + 1"
              :span="3"
            >
              <div class="check-course-achieve-info">
                <div style="flex-basis: 70%">
                  <b>名称:</b> {{ course.name }}
                </div>
                <div style="flex-basis: 30%">
                  <b>学分:</b> {{ course.credit }}
                </div>
                <div style="">
                  <b>证书:</b>
                  {{ course.certifyFile }}
                </div>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="" :span="3">
              <a-badge status="processing" text="成就信息" />
            </a-descriptions-item>
            <a-descriptions-item
              v-for="(achieve, index) in education.achieve"
              :key="achieve.id"
              :label="index + 1"
              :span="3"
            >
              <div class="check-course-achieve-info">
                <div style="flex-basis: 40%">
                  <b>日期:</b> {{ achieve.acquireTime }}
                </div>
                <div style="flex-basis: 60%">
                  <b>内容:</b> {{ achieve.title }}
                </div>
                <div style="flex-basis: 100%">
                  <b>证书:</b>
                  {{ achieve.certifyFile }}
                </div>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: "Check",
  data() {
    return {
      key: "",
    };
  },
  computed: {
    ...mapState("check", ["checkInfo"]),
    mobile() {
      return this.$mobile;
    },
  },
  methods: {
    ...mapActions("check", {
      dataKey: "dataKey",
    }),
    ...mapMutations("check", {
      CLEAR: "CLEAR",
    }),
    search() {
      this.$message.loading("获取信息中......", 0);
      let result = this.dataKey(this.key);
      result
        .then((value) => {
          this.$message.destroy();
          this.$message.success("获取成功!");
        })
        .catch((error) => {
          let message = null;
          error = String(error).slice(7, 10);
          if (error == 204) {
            message = "请求正常, 无数据返回";
          } else if (error == 301) {
            message = "重定向";
          } else if (error == 400) {
            // 客户端请求参数异常
            message = "请检查输入输入数据是否有误";
          } else if (error == 401) {
            message = "未授权，无权限";
          } else if (error == 404) {
            message = "服务器没有对应资源";
          } else if (error == 500) {
            message = "服务器出错";
          } else {
            message = "未知错误";
          }
          this.$message.destroy();
          this.$message.error(`获取失败!${message}`);
        });
    },
    clear() {
      this.key = "";
      this.CLEAR();
    },
  },
};
</script>

<style>
#check-layout {
  min-height: 600px;
}
#check-layout-title {
  position: relative !important;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
}
#check-layout {
  width: 80%;
  margin: 20px 10% 10px;
}
.check-course-achieve-info {
  display: flex;
  text-align: left;
  flex-wrap: wrap;
}
</style>